<!-- Created by xxy on 2021/11/18. 表格组件 -->
<template>
	<div>
		<el-table
			class="yayiya-table"
			v-loading="loading"
			ref="table"
			:data="tableData"
			:stripe="stripe"
			:style="tableStyle"
			:size="tableSize"
			:max-height="maxHeight"
			:row-key="rowKey"
			:tree-props="treeProps"
			:expand-row-keys="defaultExpanded"
			:default-expand-all="defaultExpandAll"
			:row-class-name="rowClassName"
			:row-style="rowStyle"
			:header-cell-class-name="headerCellClassName"
			:span-method="spanMethod"
			:highlight-current-row="highlight"
			@selection-change="handleSelectionChange"
			@row-click="handleRowClick"
		>
			<template v-for="(item, index) in headerData">
				<!-- 多选框 -->
				<el-table-column
					:key="index"
					v-if="item.type === 'selection'"
					type="selection"
					width="60"
					align="center"
					:selectable="selectable"
				></el-table-column>

				<!-- 序号框 -->
				<el-table-column
					:key="index"
					v-if="item.type === 'index'"
					type="index"
					label="序号"
					width="60"
					align="center"
					:fixed="item.fixed ? item.fixed : false"
				></el-table-column>

				<!-- 多级表头 -->
				<el-table-column
					:key="index"
					v-if="item.type === 'multistage'"
					:label="item.label"
					align="center"
				>
					<template v-for="(subItem, subIndex) in item.children">
						<!-- 普通列 -->
						<el-table-column
							:key="`${index}-${subIndex}`"
							v-if="!subItem.type"
							:prop="subItem.prop"
							:label="subItem.label"
							:width="subItem.width ? subItem.width : ''"
							:align="subItem.align ? subItem.align : 'left'"
							:class-name="subItem.className"
							:show-overflow-tooltip="
								!(subItem.showOverflowTooltip === 0)
							"
						></el-table-column>

						<!-- 插槽列 -->
						<el-table-column
							:key="`${index}-${subIndex}`"
							type
							v-if="subItem.type === 'slot'"
							:sortable="subItem.sortable"
							:prop="subItem.prop"
							:label="subItem.label"
							:width="subItem.width ? subItem.width : ''"
							:min-width="
								subItem.minWidth ? subItem.minWidth : '100'
							"
							:align="subItem.align ? subItem.align : 'left'"
							:show-overflow-tooltip="
								!(subItem.showOverflowTooltip === 0)
							"
							:fixed="subItem.fixed ? subItem.fixed : false"
						>
							<template slot-scope="scope">
								<slot
									:name="subItem.prop"
									:row="scope.row"
								></slot>
							</template>
						</el-table-column>
					</template>
				</el-table-column>

				<!-- 操作列 -->
				<el-table-column
					:key="index"
					v-if="item.type === 'operation'"
					label="操作"
					:width="item.width ? item.width : ''"
					fixed="right"
				>
					<template slot-scope="scope">
						<slot name="operation" :row="scope.row"></slot>
					</template>
				</el-table-column>

				<!-- 插槽列 -->
				<el-table-column
					:key="index"
					type
					v-if="item.type === 'slot'"
					:sortable="item.sortable"
					:prop="item.prop"
					:label="item.label"
					:width="item.width ? item.width : ''"
					:min-width="item.minWidth ? item.minWidth : '100'"
					:align="item.align ? item.align : 'left'"
					:show-overflow-tooltip="
						item.showOverflowTooltip === 0 ? false : true
					"
					:fixed="item.fixed ? item.fixed : false"
				>
					<template slot-scope="scope">
						<slot :name="item.prop" :row="scope.row"></slot>
					</template>
				</el-table-column>
				<!-- 普通列 -->
				<el-table-column
					:key="index"
					v-if="!item.type"
					:sortable="item.sortable"
					:prop="item.prop"
					:label="item.label"
					:width="item.width ? item.width : ''"
					:min-width="item.minWidth ? item.minWidth : '100'"
					:align="item.align ? item.align : 'left'"
					:class-name="item.className"
					:show-overflow-tooltip="
						item.showOverflowTooltip === 0 ? false : true
					"
					:fixed="item.fixed ? item.fixed : false"
				>
					<template slot-scope="scope">
						<template v-if="item.computed">
							{{
								setKeyValue(item.computed, scope.row[item.prop])
							}}
						</template>
						<template v-else-if="item.img">
							<el-image
								:style="{width: `${item.width}px`||'50px', height: `${item.height}px`||'50px'}"
								class="tables_i"
								v-for="i in imagesList(scope.row[item.prop])"
								:key="i.key"
								:src="i"
								:preview-src-list="[i]"
							>
							</el-image>
						</template>
						<template v-else-if="item.values">
							<div class="table_values_img">
								<el-image
									v-if="item.prop.indexOf('&') > -1"
									class="tables_i1"
									:src="scope.row[item.prop.split('&')[1]]"
									:preview-src-list="[
										scope.row[item.prop.split('&')[1]],
									]"
								>
								</el-image>
								<template>
									{{
										setValues(
											scope.row,
											item.prop.split('&')[0],
											item.valComputed,
											item.labelValue
										)
									}}
								</template>
							</div>
						</template>
						<template v-else-if="item.slots">
							<slot :name="item.slots" :row="scope.row"></slot>
						</template>
						<template v-else>
							{{ scope.row[item.prop] }}
						</template>
					</template>
				</el-table-column>

				<!-- 展开详情列 -->
				<el-table-column
					:key="index"
					type="expand"
					v-if="item.type === 'expand'"
					:prop="item.prop"
					:label="item.label"
					:width="item.width ? item.width : ''"
					:min-width="item.minWidth ? item.minWidth : '100'"
					:align="item.align ? item.align : 'left'"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<slot name="expand" :row="scope.row"></slot>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
export default {
	name: 'Tables',
	props: {
		loading: { type: Boolean, default: false }, // 加载标记
		headerData: { type: Array, default: [] }, // 表头数据
		tableData: { type: Array, default: [] }, // 表格数据
		maxHeight: { type: Number }, // 最大高度
		selectable: { type: Function }, // 多选框禁用规则
		treeProps: { type: Object }, // 树形表格配置
		tableStyle: { type: Object }, // 表格样式
		rowStyle: { type: Function }, // 行样式
		rowClassName: { type: Function }, // 行类名
		headerCellClassName: { type: Function }, // 表头类名
		spanMethod: { type: Function }, // 合并行合并列处理
		tableSize: { type: String, default: 'small' }, // 表格尺寸
		rowKey: { type: [String, Number], default: 'id' }, // 唯一标记
		defaultExpandAll: { type: Boolean, default: false }, // 是否全展开
		defaultExpanded: { type: Array, default: () => [] }, // 默认展开
		stripe: { type: Boolean, default: false }, // 是否以斑马线样式显示
		highlight: { type: Boolean, default: true }, // 是否高亮选中行
	},
	data() {
		return {};
	},
	methods: {
		setKeyValue(v, key) {
			return v[key] ? v[key] : key;
		},
		imagesList(img, s = ',') {
			return img
				? img.split(s).map((item) => {
						return item;
				  })
				: [];
		},
		setValues(row, key, valComputed, label) {
			let str = '';
			key &&
				key.split('|').map((item) => {
					if (row[item] || row[item] === 0) {
						if (valComputed) {
							if (label) {
								if (valComputed[item]) {
									str +=
										label[item] +
										valComputed[item][row[item]] +
										'\n';
								} else {
									str += label[item] + row[item] + '\n';
								}
							} else {
								if (valComputed[item]) {
									str += valComputed[item][row[item]] + '\n';
								} else {
									str += row[item] ? row[item] + '\n' : '';
								}
							}
						} else {
							str += row[item] ? row[item] + '\n' : '';
						}
					}
				});
			return str ? str : '';
		},
		/**
		 * 列表选中项改变
		 * @param {*} val 选中的数据
		 */
		handleSelectionChange(val) {
			this.$emit('selection-change', val);
		},

		/**
		 * 单击某一行 row
		 * @param {*} data 操作的数据
		 * @param {*} column 操作的列
		 * @param {*} event 点击的元素对象
		 */
		handleRowClick(data, column, event) {
			this.$emit('row-click', data, column, event);
		},
	},
};
</script>

<style scoped >
.yayiya-table ::v-deep td div {
	white-space: pre-line !important;
}
.tables_i {
	width: 50px;
}
.tables_i1 {
	width: 50px;
	margin: 0 10px 0 0;
	display: block;
}
.dialogImg {
	width: 550px;
	display: block;
	margin: auto;
}
.table_values_img {
	display: flex;
	align-items: center;
}
</style>
